<template>
  <div class="header-shadow">
    <header class="header bx">
      <h1 class="header-logo">
        <span>千千音乐</span>
        <router-link :to="{name:'Home'}">
          <img src="https://static1-music.taihe.com/client/img/99e28d0.png" alt="">
        </router-link>
      </h1>
      <nav class="header-nav" @click="addActive">
        <!--        <a href="javascript:;" class="active">首页</a>-->
        <router-link :class="path == '/' ? 'active':''" :to="{name:'Home'}">首页</router-link>
        <router-link :class="path == '/songlist' ? 'active':''" :to="{name:'SongList'}">歌单</router-link>
        <router-link :class="path == '/Singer' ? 'active':''" :to="{name:'Singer'}">歌手</router-link>
        <router-link :class="path == '/Vip' ? 'active':''" :to="{name:'Vip'}">VIP</router-link>
        <router-link :class="path == '/TheClient' ? 'active':''" :to="{name:'TheClient'}">客户端</router-link>
      </nav>

      <div class="header-search">
        <el-input
            v-model.trim="search"
            ref="input"
            @input="querySearchAsync"
            @keydown.native.13="keyDown"
            @focus="getFocus"
            placeholder="请输入歌名、歌词、歌手或专辑"
        />
        <i class="iconfont icon-sousuo" @click="toSearch"></i>
        <div class="header-search-sug"
             v-show="searchMask && songs && songs.length"
             v-loading="loading">
          <div
              class="header-search-sug-item"
              @click="toPlay"
          >
            <a class="search"
               :id="song.id"
               :data-img="song.al.picUrl"
               :data-name="`${song.ar[0].name}-${song.name}`"
               href="javascript:;"
               v-for="song of songs "
               :key="song.id">
              {{ song.ar[0].name }} - {{ song.name }}
            </a>
          </div>
        </div>
      </div>
      <div class="header-inOrreg" @click="login" v-if="!userInfo.userId">
        <span>登录</span>
        <span> / </span>
        <span>注册</span>
      </div>
      <div class="header-out" v-else>
        <el-dropdown trigger="click" placement="bottom">
         <span class="el-dropdown-link">
            <img :src="userInfo.avatarUrl" alt="" class="avatar">
         </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link :to="{name:'Home'}">首页</router-link>
            </el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <Login v-show="dialogVisible" :close="closeDialog"/>
    </header>
  </div>
</template>

<script>
// 引入防抖
import debounce from 'loadsh/debounce'
import Login from '@/components/Login/Login'
import {mapState} from 'vuex'

export default {
  name: 'Header',
  components: {
    Login
  },
  computed: {
    ...mapState('login', ['userInfo'])
  },
  watch: {
    '$route.path': {
      handler(to) {
        this.path = to
      },
      immediate: true
    }
  },
  data() {
    return {
      path: '/',
      dialogVisible: false, // 控制是否显示dialog
      search: null, // 搜索的关键字
      searchMask: false,  // 是否显示搜索的数据
      songs: [], // 歌曲列表数据
      loading: false // 当数据未加载完成时首先是
    }
  },
  methods: {
    // 登录或注册
    login() {
      // 显示Dialog
      this.dialogVisible = true
    },
    // 退出登录
    logout() {
      this.$store.dispatch('login/logout')
    },
    // 关闭dialog
    closeDialog() {
      this.dialogVisible = false
    },
    // 切换当中选中的标签
    addActive() {
      this.test = this.$route.name
    },
    // 搜索关键字数据
    querySearchAsync: debounce(async function () {
      if (!this.search.length) return
      this.songs = [] // 清除数据
      this.loading = true
      let {result} = await this.$API.search.search(this.search, 10)
      this.$store.commit('UPD_SONG_list', true)
      this.searchMask = true
      this.loading = false
      // 歌曲列表
      this.songs = result.songs
    }, 700),
    // 按下回车键
    keyDown() {
      this.toSearch()
    },
    // 获取焦点显示搜索的数据
    getFocus(e) {
      if (!this.search || !this.search.length) return
      if (this.search === e.target.value) {
        this.searchMask = true
      }
    },
    // 去search组件
    toSearch() {
      if (!this.search) {
        this.$message.error('请输入要搜索的内容🐇')
        return
      }
      if (this.$store.state.songList) {
        this.$router.push({name: 'Search', query: {work: this.search, _: Date.now()}})
      }
    },
    // 当点击是下拉列表数据时 直接去播放
    toPlay(e) {
      const id = e.target.id
      const name = e.target.dataset.name
      const img = e.target.dataset.img
      if (id) {
        // 传递歌曲id及封面图及歌手名
        this.$bus.$emit('play', {id, name, img})
      }
    },
    // 点击其他位置关闭搜索的数据显示
    showSearchData(e) {
      if (e.target.className === 'el-input__inner') return
      this.searchMask = false
    }
  },
  mounted() {
    window.addEventListener('click', this.showSearchData)
  },
  beforeDestroy() {
    window.removeEventListener('click', this.showSearchData)
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  height: 80px;
  line-height: 80px;
  margin-bottom: 30px;
}

.header-shadow {
  box-shadow: 0 2px 10px 0 rgba(52, 52, 52, .1);
}

// 头部logo
.header-logo {
  margin-right: 80px;

  span {
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
  }

  img {
    display: block;
    width: 120px;
    height: 40px;
    object-fit: cover;
  }
}

.header-nav {
  a {
    display: inline-block;
    margin: 0 25px;
    font-size: 16px;
    color: #909399;
    border-bottom: 1px solid transparent;
    cursor: pointer;
  }

  .active {
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid #000;
  }
}

.header-search {
  position: relative;
  margin: 0 30px 0 55px;
  width: 320px;

  .icon-sousuo {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    font-weight: 700;
    font-size: 22px;
  }

  // 搜索建议样式
  .header-search-sug {
    transform-origin: center top;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
    z-index: 100;
    background: #fff;
    width: 320px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 62px;
    left: 0;

    .header-search-sug-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      max-height: 280px;
      padding: 10px 0;
      box-sizing: border-box;
      margin-bottom: -17px;
      margin-right: -17px;

      a {
        padding: 0 20px;
        margin: 0;
        line-height: 34px;
        cursor: pointer;
        color: #606266;
        font-size: 14px;
        list-style: none;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  // 输入框的搜索图标样式
  ::v-deep .el-icon-search {
    font-weight: 700;
    font-size: 20px;
    color: #000;
  }

  ::v-deep .el-icon-search {
    cursor: pointer;
    transition: all .3s;

    &:hover {
      color: #e61723;
    }
  }

}


// 登录和注册
.header-inOrreg {
  cursor: pointer;

  span {
    font-size: 14px;

    &:nth-of-type(2) {
      color: #606266;
      margin: 0 2px;
    }
  }
}

// 退出
.header-out {
  display: flex;
  align-items: center;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}

</style>
